<div class="logistics-trajectory">
    <div *ngIf="tagData.data && tagData.data.data.length > 0" #addressMap [ngStyle]="tagData.data.headDiv.mapCssStyle | styleFilter" class="trajectory-map"></div>

    <div class="express-detail" *ngIf="tagData.data && tagData.data.data.length > 0">
        <div class="express-status" [ngStyle]="tagData.data.headDiv.expressStatusCssStyle| styleFilter" *ngIf="tagData.data.headDiv.expressNumber">
            <div class="express-num">
                <span
                    [ngStyle]="tagData.data.headDiv.expressNumber?.labelCssStyle| styleFilter">{{tagData.data.headDiv.expressNumber?.label}}{{tagData.data.headDiv.expressNumber?.value}}</span>
                <img appDebounceClick (debounceClick)="copyClick($event, tagData.data.headDiv.expressNumber?.value, tagData.data.headDiv.expressNumber?.msg)"
                    [ngStyle]="tagData.data.headDiv.expressNumber?.imgCssStyle| styleFilter"
                    [src]="tagData.data.headDiv.expressNumber?.img" />
            </div>

            <div class="express-status-left">
                <span class="status-left-title"
                    [ngStyle]="tagData.data.headDiv.expressStatus?.labelCssStyle| styleFilter">{{tagData.data.headDiv.expressStatus?.label}}</span>
                <span class="status-left-label"
                    [ngStyle]="tagData.data.headDiv.expressStatus?.valueCssStyle| styleFilter">{{tagData.data.headDiv.expressStatus?.value}}</span>
            </div>
            <div class="express-right">
                <span class="status-right-label"
                    [ngStyle]="tagData.data.headDiv.expressCity?.labelCssStyle| styleFilter">{{tagData.data.headDiv.expressCity?.label}}</span>
                <img class="status-right-img" [ngStyle]="tagData.data.headDiv.expressCity?.imgCssStyle| styleFilter"
                    [src]="tagData.data.headDiv.expressCity?.img" />
                <span class="status-right-label"
                    [ngStyle]="tagData.data.headDiv.expressCity?.valueCssStyle| styleFilter">{{tagData.data.headDiv.expressCity?.value}}</span>
            </div>
        </div>

        <div class="express-bottom" [ngStyle]="tagData.data.headDiv.expressBottomCssStyle| styleFilter">
            <div class="express-head" *ngIf="tagData.data.headDiv.expressName">
                <div class="express-head-left">
                    <img class="expressImg"
                        [ngStyle]="tagData.data.headDiv.expressName?.expressImgCssStyle | styleFilter"
                        [src]="tagData.data.headDiv.expressName?.expressImg" />
                    <span class="expressName?"
                        [ngStyle]="tagData.data.headDiv.expressName?.labelCssStyle | styleFilter">{{tagData.data.headDiv.expressName?.label}}</span>
                </div>
                <img class="expressImg expressPhoneImg" appDebounceClick
                    (debounceClick)="call(tagData.data.headDiv.expressName?.mobile, tagData.data.headDiv.expressName?.label)"
                    [src]="tagData.data.headDiv.expressName?.callImg"
                    [ngStyle]="tagData.data.headDiv.expressName?.callImgCssStyle | styleFilter" />
            </div>

            <div class="view-express-box" [ngStyle]="tagData.cssStyle | styleFilter">
                <ng-container
                    *ngIf="tagData.data.data && tagData.data.data.length > 0; else elseEmptyExpressDataTemplate">
                    <ng-container *ngFor="let item of tagData.data.data;let i = index">
                        <div class="express" [ngStyle]="item?.expressBoxCssStyle | styleFilter">
                            <div class="express-circle" [ngStyle]="item?.expressCircleCssStyle | styleFilter">
                                <div class="top-circle-left" [ngStyle]="item?.circleCssStyle | styleFilter"
                                    [ngClass]="{'circle-action': i===0}">
                                </div>
                                <span *ngIf="i !== tagData.data.data.length - 1" class="label-left isGrayBg"
                                    style="height: 100%;" [ngStyle]="item?.itemCircleLineCssStyle | styleFilter">
                                </span>
                            </div>
                            <div class="top-content" [ngStyle]="item?.itemBoxCssStyle | styleFilter">
                                <ng-container *ngIf="item.status; else elseStatu">
                                    <span class="express-title" [ngStyle]="item?.titleCssStyle | styleFilter"
                                        [ngClass]="{'statu-action': i===0}">{{item.status}}</span>
                                    <div [ngStyle]="item?.itemDescCssStyle | styleFilter"><span
                                            [innerHTML]="item.context"></span> </div>
                                    <span class="express-left"
                                        [ngStyle]="item?.itemTimeCssStyle | styleFilter">{{item.time|customDateFilter:'mm'}}</span>
                                </ng-container>
                                <ng-template #elseStatu>
                                    <span class="express-left"
                                        [ngStyle]="item?.itemTimeCssStyle | styleFilter">{{item.time|customDateFilter:'mm'}}</span>
                                    <div [ngStyle]="item?.itemDescCssStyle | styleFilter"><span
                                            [innerHTML]="item.context"></span> </div>
                                </ng-template>
                            </div>
                        </div>
                        <div class="bottom" *ngIf="i !== tagData.data.data.length - 1">
                            <div class="express-lable">
                                <span *ngIf="i !== tagData.data.length - 1"
                                    [ngStyle]="tagData.data?.borderCssStyle | styleFilter"
                                    [ngClass]="item.status === '2'?'':'isGrayBg'" class="label-left"></span>
                                <span *ngIf="item.label && item.status === '1'"
                                    [ngStyle]="tagData.data?.labelCssStyle| styleFilter"
                                    class="label-right">{{item.context}}</span>
                            </div>
                        </div>
                    </ng-container>
                </ng-container>
                <ng-template #elseEmptyExpressDataTemplate>
                    <p class="emptyExpressData" [ngStyle]="tagData.data?.emptyDataTipsCssStyle| styleFilter">
                        {{tagData.data?.emptyDataTips}}</p>
                </ng-template>



            </div>
        </div>
    </div>
</div>
<div class="noData" *ngIf="(tagData.data.data.length < 1)||(!tagData.data.data)"
    [ngStyle]="tagData.hintCssStyle | styleFilter">{{this.tagData.hint?this.tagData.hint:'暂无数据'}}</div>